<!-- 分佣设置 关键人设置 -->
<template>
	<div>
		<el-breadcrumb separator="/" class="bread-title">
			<el-breadcrumb-item :to="{ path: '/subcommission' }">项目分佣管理</el-breadcrumb-item>
			<el-breadcrumb-item>{{pagetype=='set'? '关键人设置':'关键人编辑'}}</el-breadcrumb-item>
		</el-breadcrumb>
		<el-form  ref="ruleform"  label-width="140px" class="demo-ruleForm">
			<h4 style="margin-left: 50px">项目信息</h4>
			<el-form-item label="楼盘名称："  required>
				<span>{{infodata.devName}}</span>
			</el-form-item>
			<el-form-item label="合作标签："  required>
				<span v-if="infodata.labelName">{{infodata.labelName}}</span>
				<span v-else>暂无</span>
			</el-form-item>
			<h4 style="margin-left: 50px">设置关键人信息</h4>
			<el-form-item label="关键人姓名：" required>
				<el-input v-model.trim="form.keypersonName" placeholder="请输入姓名" style="width: 300px;" maxlength="20"></el-input>
			</el-form-item>
			<el-form-item label="关键人电话：" required>
				<el-input v-model.trim="form.keypersonPhone" placeholder="请输入电话" style="width: 300px;" maxlength="20"></el-input>
			</el-form-item>
			<el-form-item label="计提节点：" required>
				<el-select v-model="form.calculationNode" filterable style="width: 300px;">
					<el-option v-for="item in nodelist"
						:key="item.id"
						:label="item.name"
						:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="计提模式：" required>
				<el-radio-group v-model="form.extractCategory" style="width: 300px;">
				  <el-radio :label="2">基数*比例</el-radio>
				  <el-radio :label="1">套*金额</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item v-if="form.extractCategory==2" label="计提比例：" required>
				<el-input v-model.trim="form.extractProportion" placeholder="请输入计提比例" type="number" step='0.01'  @input.native="checkNum(form.extractProportion)" maxlength="20" style="width: 300px;"></el-input>基数*比例
			</el-form-item>
			<el-form-item v-else label="计提基数：" required>
				<el-input v-model="form.extractProportion"  placeholder="请输入计提基数" type="number" step='0.01'  @input.native="checkNum(form.extractProportion)"  style="width: 300px;"></el-input>套*金额
			</el-form-item>
			<div style="margin-left: 50px">
				<p>历史版本</p>
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column label="关键人姓名" prop="keypersonName" align="center"></el-table-column>
					<el-table-column label="关键人电话" prop='keypersonPhone' align="center"></el-table-column>
					<el-table-column label="计提节点" prop="calculationNode" align="center">
						<template  slot-scope="scope">
							<span>{{scope.row.calculationNode==2?'交易及佣金':'回款'}}</span>
						</template>
					</el-table-column>
					<el-table-column label="计提模式" prop='extractCategory' align="center">
						<template  slot-scope="scope">
							<span>{{scope.row.extractCategory==1?'套*金额':'基数*比例'}}</span>
						</template>
					</el-table-column>
					<el-table-column label="计提比例/基数" prop="extractProportion" align="center"></el-table-column>
					<el-table-column label="应用区间" prop='createTime' align="center">
						<template  slot-scope="scope">
							<span>{{scope.row.createTime.slice(0,11)}}</span> 至 <span>{{scope.row.updateTime.slice(0,11)}}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作人" prop='creatorName' align="center"></el-table-column>
				</el-table>
			</div>
			<el-form-item style="text-align: center;margin-top: 50px">
					<el-button style="margin-left: 100px"  type="primary" @click="savehander()">保存</el-button>
					<el-button  type="primary" @click="$router.push({path:'/subcommission'})">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import api from '@/api/apiPath'
	export default {
	    data() {
	        return {
	        	infodata:{},
	        	tableData:[],
	        	pagetype:'',
	        	nodelist:[{id:'',name:'请选择'},{id:2,name:'交易及佣金'},{id:3,name:'回款'}],
	        	form:{
	        		keypersonName:'',
	        		keypersonPhone:'',
	        		extractCategory:2,
	        		extractProportion:'',
	        		calculationNode:'',//计提节点
	        	}
	        }
	    },
	    created(){
	    	this.pagetype =this.$route.query.pagetype
	    	this.getpersonInfo()
	    },
	    methods:{
	    	getpersonInfo(){
	    		this.axios.post(api.KEYPERSONADDUI,{projectSettingId:this.$route.query.id}).then((res)=>{
					if (res.data.code == 200) {
						this.infodata = res.data.data
						this.tableData = this.infodata.keypersonList
						if (this.pagetype == 'edit' && this.tableData[0].effectiveFlag == 1) {
							this.form.keypersonName = this.tableData[0].keypersonName
							this.form.keypersonPhone =  this.tableData[0].keypersonPhone
							this.form.calculationNode = this.tableData[0].calculationNode
							this.form.extractCategory = this.tableData[0].extractCategory
							this.form.extractProportion = this.tableData[0].extractProportion
						}
					}
	    		})
	    	},
	    	checkNum(val){
	    	    let value = (val.toString().match(/^\d*(\.?\d{0,2})/g)[0])
	    	    this.$nextTick(()=>{
	    		    this.form.extractProportion = value
	    	    })	
	    	},
			savehander(){
				if (this.form.keypersonName == '') {
					this.$message({
					    message: '请输入关键人姓名',
					    type: 'warning'
					});
					return
				}

				if (this.form.keypersonPhone == '') {
					this.$message({
					    message: '请输入关键人电话',
					    type: 'warning'
					});
					return
				}

				let reg=/^1(3|4|5|6|7|8)\d{9}$/g;
				if(this.form.keypersonPhone.length<11){
					this.$message({
					    message: '请输入正确的手机号',
					    type: 'warning'
					});
					return
				}
				if(!(reg.test(this.form.keypersonPhone))){
					this.$message({
					    message: '手机号有误，请重新输入',
					    type: 'warning'
					});
					return
				}

				if (this.form.calculationNode == '') {
					this.$message({
					    message: '请选择计提节点',
					    type: 'warning'
					});
					return
				}
				let strttip = ''
				if (this.form.extractCategory == 1) {
					strttip = '计提基数'
					if (this.form.extractProportion <= 0 || this.form.extractProportion >= 1000000) {
						this.$message({
						    message: '计提基数，大于0小于1000000',
						    type: 'warning'
						});
						return
					}
				}else {
					strttip = '计提比例'
					if (this.form.extractProportion <= 0 || this.form.extractProportion >= 100) {
						this.$message({
						    message: '计提比例，大于0小于100',
						    type: 'warning'
						});
						return
					}
				}
				if (this.form.extractProportion == '') {
					this.$message({
					    message: `请输入${strttip}`,
					    type: 'warning'
					});
					return
				}
				this.$confirm('是否保存关键人信息?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					let temobj = {}
					temobj.projectSettingId = this.$route.query.id
					temobj.keypersonName = this.form.keypersonName
					temobj.keypersonPhone = this.form.keypersonPhone
					temobj.calculationNode = this.form.calculationNode
					temobj.extractCategory = this.form.extractCategory
					temobj.extractProportion = this.form.extractProportion
					this.axios.post(api.KEYPERSONADD,temobj).then(res=>{
						if (res.data.code == 200) {
							this.$router.go(-1)
						}
					})
				}).catch(() => {
				  this.$message({
				    type: 'info',
				    message: '已取消'
				  });          
				});
	    	}
	    }
	}
</script>
<style lang="stylus">
	

</style>
